<template>
  <section class="m-4">
    <el-card>
      <header slot="header">
        <el-button type="success" @click="toEdit()">新增</el-button>
      </header>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="记录ID" prop="id"/>
        <el-table-column label="周期(签到天数)" prop="checkin_count"/>
        <el-table-column label="奖励类型" prop="reward_type">
          <template slot-scope="{row}">
            <el-tag v-if="row.reward_type === 'gift'" type="success">礼物</el-tag>
            <el-tag v-else-if="row.reward_type === 'product'" type="primary">商品</el-tag>
            <el-tag v-else type="warning">金币</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="奖励名称" prop="reward_name"/>
        <el-table-column label="奖励数量" prop="count"/>
        <el-table-column label="现实价值" prop="reward_price"/>
        <el-table-column label="修改时间" prop="updated_at"/>
        <el-table-column label="是否显示" prop="is_visible">
          <template slot-scope="{row}">
            <el-tag v-if="row.is_visible === 1" type="success">显示</el-tag>
            <el-tag v-else type="danger">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="">
          <template slot-scope="{row}">
            <el-button plain type="primary" @click="toEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />
    </el-card>

    <HSBForm ref="HSBForm" :refresh-data="initData"/>
  </section>
</template>

<script>
import HSBForm from '@/views/anchorReward/comps/HSBForm'
import request from '@/utils/request'

export default {
  name: 'hostSignInBonus',
  components: {
    HSBForm
  },
  data() {
    return {
      tableData: [],
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  computed: {
    HSBForm() {
      return this.$refs.HSBForm
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData(page = 1) {
      try {
        const { data: { meta, list } } = await request({ url: '/presenter/checkin/reward', params: { page } })
        this.meta.page = meta.page
        this.meta.total = meta.total
        this.tableData = list
      } catch (e) {
        console.error(e)
      }
    },
    toEdit(row) {
      this.HSBForm.show(row)
    }
  }
}
</script>

<style scoped>

</style>
